<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 6.2.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css" integrity="sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"singingxy.github.io","root":"/","images":"/images","scheme":"Gemini","version":"8.6.1","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"}}</script><script src="/js/config.js"></script>
<meta name="description" content="flex（ Flexible Box：弹性布局盒模型），用来为盒模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。可以做到简便、完整、响应式地实现各种页面布局。 使用 flex 布局的优势 可在不同方向排列元素 控制元素排序的方向 控制元素的对齐方式 控制元素之间等距">
<meta property="og:type" content="article">
<meta property="og:title" content="flex布局">
<meta property="og:url" content="https://singingxy.github.io/2020/flex/index.html">
<meta property="og:site_name" content="sing&#39;s blog">
<meta property="og:description" content="flex（ Flexible Box：弹性布局盒模型），用来为盒模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。可以做到简便、完整、响应式地实现各种页面布局。 使用 flex 布局的优势 可在不同方向排列元素 控制元素排序的方向 控制元素的对齐方式 控制元素之间等距">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://singingxy.github.io/2020/flex/1.png">
<meta property="og:image" content="https://singingxy.github.io/2020/flex/2.png">
<meta property="og:image" content="https://singingxy.github.io/2020/flex/3.png">
<meta property="og:image" content="https://singingxy.github.io/2020/flex/4.png">
<meta property="og:image" content="https://singingxy.github.io/2020/flex/5.png">
<meta property="article:published_time" content="2020-01-02T01:15:30.000Z">
<meta property="article:modified_time" content="2020-01-02T01:15:30.000Z">
<meta property="article:author" content="Sing">
<meta property="article:tag" content="flex">
<meta property="article:tag" content="css">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://singingxy.github.io/2020/flex/1.png">


<link rel="canonical" href="https://singingxy.github.io/2020/flex/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://singingxy.github.io/2020/flex/","path":"/2020/flex/","title":"flex布局"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>flex布局 | sing's blog</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">sing's blog</h1>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">C'est La Vie Mon Ami.</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>







</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-flex-%E5%B8%83%E5%B1%80%E7%9A%84%E4%BC%98%E5%8A%BF"><span class="nav-number">1.</span> <span class="nav-text">使用 flex 布局的优势</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5"><span class="nav-number">2.</span> <span class="nav-text">基本概念</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Flex-%E5%AE%B9%E5%99%A8%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="nav-number">3.</span> <span class="nav-text">Flex 容器的属性</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#1-flex-direction-%E5%86%B3%E5%AE%9A%E4%B8%BB%E8%BD%B4%E7%9A%84%E6%96%B9%E5%90%91%EF%BC%88%E5%85%83%E7%B4%A0%E7%9A%84%E6%8E%92%E5%88%97%E6%96%B9%E5%90%91%EF%BC%89"><span class="nav-number">3.0.1.</span> <span class="nav-text">1. flex-direction: 决定主轴的方向（元素的排列方向）</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#2-flex-wrap-%E5%86%B3%E5%AE%9A%E5%AE%B9%E5%99%A8%E5%86%85%E9%A1%B9%E7%9B%AE%E6%98%AF%E5%90%A6%E5%8F%AF%E6%8D%A2%E8%A1%8C"><span class="nav-number">3.0.2.</span> <span class="nav-text">2. flex-wrap: 决定容器内项目是否可换行</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#3-justify-content%EF%BC%9A%E5%AE%9A%E4%B9%89%E4%BA%86%E9%A1%B9%E7%9B%AE%E5%9C%A8%E4%B8%BB%E8%BD%B4%E7%9A%84%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F"><span class="nav-number">3.0.3.</span> <span class="nav-text">3. justify-content：定义了项目在主轴的对齐方式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#4-align-items-%E5%AE%9A%E4%B9%89%E4%BA%86%E9%A1%B9%E7%9B%AE%E5%9C%A8%E4%BA%A4%E5%8F%89%E8%BD%B4%E4%B8%8A%E7%9A%84%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F"><span class="nav-number">3.0.4.</span> <span class="nav-text">4. align-items: 定义了项目在交叉轴上的对齐方式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#5-align-content-%E5%AE%9A%E4%B9%89%E4%BA%86%E5%A4%9A%E6%A0%B9%E8%BD%B4%E7%BA%BF%E7%9A%84%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F%EF%BC%88%E5%A6%82%E6%9E%9C%E9%A1%B9%E7%9B%AE%E5%8F%AA%E6%9C%89%E4%B8%80%E6%A0%B9%E8%BD%B4%E7%BA%BF%EF%BC%8C%E9%82%A3%E4%B9%88%E8%AF%A5%E5%B1%9E%E6%80%A7%E5%B0%86%E4%B8%8D%E8%B5%B7%E4%BD%9C%E7%94%A8%EF%BC%89"><span class="nav-number">3.0.5.</span> <span class="nav-text">5. align-content: 定义了多根轴线的对齐方式（如果项目只有一根轴线，那么该属性将不起作用）</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Flex-%E9%A1%B9%E7%9B%AE%E5%B1%9E%E6%80%A7"><span class="nav-number">4.</span> <span class="nav-text">Flex 项目属性</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#1-order%EF%BC%9A%E6%8E%A7%E5%88%B6%E5%85%83%E7%B4%A0%E9%A1%BA%E5%BA%8F"><span class="nav-number">4.0.1.</span> <span class="nav-text">1. order：控制元素顺序</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#2-flex-grow-%E6%8E%A7%E5%88%B6%E5%85%83%E7%B4%A0%E6%94%BE%E5%A4%A7%E6%AF%94%E4%BE%8B"><span class="nav-number">4.0.2.</span> <span class="nav-text">2. flex-grow: 控制元素放大比例</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#3-flex-shrink-%E6%8E%A7%E5%88%B6%E5%85%83%E7%B4%A0%E7%BC%A9%E5%B0%8F%E6%AF%94%E4%BE%8B"><span class="nav-number">4.0.3.</span> <span class="nav-text">3. flex-shrink: 控制元素缩小比例</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#4-flex-basis-%E8%AE%BE%E7%BD%AE%E5%85%83%E7%B4%A0%E5%9B%BA%E5%AE%9A%E6%88%96%E8%87%AA%E5%8A%A8%E7%A9%BA%E9%97%B4%E7%9A%84%E5%8D%A0%E6%AF%94"><span class="nav-number">4.0.4.</span> <span class="nav-text">4. flex-basis: 设置元素固定或自动空间的占比</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#5-align-self-%E9%87%8D%E5%86%99-align-item-%E7%88%B6%E5%B1%9E%E6%80%A7"><span class="nav-number">4.0.5.</span> <span class="nav-text">5. align-self:重写 align-item 父属性</span></a></li></ol></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-overview">
            <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">Sing</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">18</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">2</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">25</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



          </div>
        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://singingxy.github.io/2020/flex/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Sing">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="sing's blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          flex布局
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-01-02 09:15:30" itemprop="dateCreated datePublished" datetime="2020-01-02T09:15:30+08:00">2020-01-02</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">笔记</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <p>flex（ Flexible Box：弹性布局盒模型），用来为盒模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。可以做到简便、完整、响应式地实现各种页面布局。</p>
<h3 id="使用-flex-布局的优势"><a href="#使用-flex-布局的优势" class="headerlink" title="使用 flex 布局的优势"></a>使用 flex 布局的优势</h3><ol>
<li>可在不同方向排列元素</li>
<li>控制元素排序的方向</li>
<li>控制元素的对齐方式</li>
<li>控制元素之间等距</li>
</ol>
<span id="more"></span>

<h3 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h3><ol>
<li>flex container: Flex 容器</li>
<li>flex item: Flex 项目（元素）</li>
<li>flex direction: 布局方向</li>
</ol>
<p>Flex 容器的所有子元素自动成为 Flex 项目。</p>
<p>在 flex 容器中默认存在两条轴，主轴(main axis) 和交叉轴(cross axis)，默认水平方向为主轴，垂直方向为交叉轴，也可以通过修改使垂直方向变为主轴，水平方向变为交叉轴。</p>
<h3 id="Flex-容器的属性"><a href="#Flex-容器的属性" class="headerlink" title="Flex 容器的属性"></a>Flex 容器的属性</h3><h5 id="1-flex-direction-决定主轴的方向（元素的排列方向）"><a href="#1-flex-direction-决定主轴的方向（元素的排列方向）" class="headerlink" title="1. flex-direction: 决定主轴的方向（元素的排列方向）"></a>1. flex-direction: 决定主轴的方向（元素的排列方向）</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">flex-direction</span>: row | row-reverse | column | column-reverse;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>row（默认）：主轴为水平方向，起点在左端。<br>row-reverse：主轴为水平方向，起点在右端。<br>column：主轴为垂直方向，起点在上沿。<br>column-reverse：主轴为垂直方向，起点在下沿。</p>
<p><img src="/2020/flex/1.png"></p>
<h5 id="2-flex-wrap-决定容器内项目是否可换行"><a href="#2-flex-wrap-决定容器内项目是否可换行" class="headerlink" title="2. flex-wrap: 决定容器内项目是否可换行"></a>2. flex-wrap: 决定容器内项目是否可换行</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: nowrap | wrap | wrap-reverse;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>nowrap（默认）：不换行。<br>wrap：换行，第一行在上方。<br>wrap-reverse：换行，第一行在下方。</p>
<p><img src="/2020/flex/2.png"></p>
<h5 id="3-justify-content：定义了项目在主轴的对齐方式"><a href="#3-justify-content：定义了项目在主轴的对齐方式" class="headerlink" title="3. justify-content：定义了项目在主轴的对齐方式"></a>3. justify-content：定义了项目在主轴的对齐方式</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">justify-content</span>: flex-start | flex-end | center | space-between | space-around;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>flex-start（默认）：左对齐<br>flex-end：右对齐<br>center： 居中<br>space-between：两端对齐，项目之间的间隔都相等，剩余空间等分成间隙<br>space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。</p>
<p><img src="/2020/flex/3.png"></p>
<h5 id="4-align-items-定义了项目在交叉轴上的对齐方式"><a href="#4-align-items-定义了项目在交叉轴上的对齐方式" class="headerlink" title="4. align-items: 定义了项目在交叉轴上的对齐方式"></a>4. align-items: 定义了项目在交叉轴上的对齐方式</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">align-items</span>: flex-start | flex-end | center | baseline | stretch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>flex-start：交叉轴的起点对齐。<br>flex-end：交叉轴的终点对齐。<br>center：交叉轴的中点对齐。<br>baseline: 项目的第一行文字的基线对齐。<br>stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。</p>
<p><img src="/2020/flex/4.png"></p>
<h5 id="5-align-content-定义了多根轴线的对齐方式（如果项目只有一根轴线，那么该属性将不起作用）"><a href="#5-align-content-定义了多根轴线的对齐方式（如果项目只有一根轴线，那么该属性将不起作用）" class="headerlink" title="5. align-content: 定义了多根轴线的对齐方式（如果项目只有一根轴线，那么该属性将不起作用）"></a>5. align-content: 定义了多根轴线的对齐方式（如果项目只有一根轴线，那么该属性将不起作用）</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">align-content</span>: flex-start | flex-end | center | space-between | space-around |</span><br><span class="line">    stretch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>flex-start：与交叉轴的起点对齐。<br>flex-end：与交叉轴的终点对齐。<br>center：与交叉轴的中点对齐。<br>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。<br>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。<br>stretch（默认值）：轴线占满整个交叉轴。</p>
<p><img src="/2020/flex/5.png"></p>
<h3 id="Flex-项目属性"><a href="#Flex-项目属性" class="headerlink" title="Flex 项目属性"></a>Flex 项目属性</h3><h5 id="1-order：控制元素顺序"><a href="#1-order：控制元素顺序" class="headerlink" title="1. order：控制元素顺序"></a>1. order：控制元素顺序</h5><p>定义项目的排列顺序。数值越小，排列越靠前，默认为 0。可以为负</p>
<h5 id="2-flex-grow-控制元素放大比例"><a href="#2-flex-grow-控制元素放大比例" class="headerlink" title="2. flex-grow: 控制元素放大比例"></a>2. flex-grow: 控制元素放大比例</h5><p>定义项目的放大比例，默认为 0，值为 0 时不进行放大。</p>
<p>如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。(如果有的话)</p>
<p>如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。</p>
<h5 id="3-flex-shrink-控制元素缩小比例"><a href="#3-flex-shrink-控制元素缩小比例" class="headerlink" title="3. flex-shrink: 控制元素缩小比例"></a>3. flex-shrink: 控制元素缩小比例</h5><p>定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小，负值对该属性无效。设置为 0 时不缩小。</p>
<ul>
<li><p>如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。</p>
</li>
<li><p>如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。</p>
</li>
</ul>
<h5 id="4-flex-basis-设置元素固定或自动空间的占比"><a href="#4-flex-basis-设置元素固定或自动空间的占比" class="headerlink" title="4. flex-basis: 设置元素固定或自动空间的占比"></a>4. flex-basis: 设置元素固定或自动空间的占比</h5><p>定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小，这时候 item 的宽高取决于 width 或 height 的值。若值为 0，则必须加上单位，以免被视作伸缩性。</p>
<p>当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。</p>
<ul>
<li>当 flex-basis 值为 0 % 时，是把该项目视为零尺寸的，故即使声明该尺寸为 140px，也并没有什么用。</li>
<li>当 flex-basis 值为 auto 时，则跟根据尺寸的设定值(假如为 100px)，则这 100px 不会纳入剩余空间。</li>
</ul>
<h5 id="5-align-self-重写-align-item-父属性"><a href="#5-align-self-重写-align-item-父属性" class="headerlink" title="5. align-self:重写 align-item 父属性"></a>5. align-self:重写 align-item 父属性</h5><p>允许单个项目有与其他项目不一样的对齐方式。<br>默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item</span> &#123;</span><br><span class="line">  <span class="attribute">align-self</span>: auto | flex-start | flex-end | center | baseline | stretch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/flex/" rel="tag"># flex</a>
              <a href="/tags/css/" rel="tag"># css</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2019/Introduction-to-MVVM/" rel="prev" title="理解MVVM">
                  <i class="fa fa-chevron-left"></i> 理解MVVM
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2020/vscode-eslint/" rel="next" title="VSCode升级，ESLint自动修复的设置更新">
                  VSCode升级，ESLint自动修复的设置更新 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Sing</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script>

  




  





</body>
</html>
